import React from 'react';
import ReactDOM from 'react-dom';

// 要给React 组件绑定事件处理函数
const Hello = () => {
  // 事件处理函数
  function clickHandler() {
    console.log('按钮xxx被点击了');
  }

  // 箭头函数
  const clickHandler2 = () => {
    console.log('按钮yyy被点击了');
  };

  return (
    <div>
      {/* <button onClick={() => console.log('按钮被点击了')}>按钮</button> */}
      {/* <button onClick={clickHandler}>按钮</button> */}
      <button onClick={clickHandler2}>按钮</button>
    </div>
  );
};

// 类组件 事件绑定
class Hello2 extends React.Component {
  handleClick(e) {
    console.log('按钮被点击了', e);
    console.log('e.target', e.target);
    if (e.target.id === 1) {
      // 按钮1要处理的业务
    }

    // console.log('e.currentTarget', e.currentTarget);
    // console.log(e.target === e.currentTarget);
  }

  handleA(e) {
    console.log('aaaaaaa');
    e.preventDefault();
    // 后续 a 标签浏览器给他添加的事件处理程序就不执行了
  }

  render() {
    return (
      <div>
        <h1>类组件</h1>
        <a onClick={this.handleA} href="http://www.baidu.com">
          跳转
        </a>
        <div onClick={this.handleClick}>
          <button id={1}>按钮1</button>
          <button id={2}>按钮2</button>
          <button id={3}>按钮3</button>
          <button id={4}>按钮4</button>
        </div>
      </div>
    );
  }
}
const jsx = <div>JSX</div>;
// React 组件的使用规则
ReactDOM.render(<Hello2></Hello2>, document.getElementById('root'));
// ReactDOM.render(
//   [<Hello key={1} />, <Hello2 key={2} />],
//   document.getElementById('root')
// );
